<template>
  <view>
	  <my-search></my-search>
    <!-- 商品列表 -->
    <view class="scroll-container">
      <scroll-view class="right-scroll" scroll-y="true" show-scrollbar="true">
        <view class="product-row">
          <view v-for="(item, index) in productList" :key="index" class="product-item">
            <view>
              <product
                class="product-card"
                :imageUrl="getPrimaryImageUrl(item.images)"
                :title="item.productName"
                :price="item.price"
                :unit="item.unit"
                :productId="item.productId"
              />
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import { searchProduct } from '../../../api/home/goods';

  export default {
    data() {
      return {
        productList: [], // 商品列表
        productName: '', // 搜索内容
      };
    },

    onLoad(options) {
      // 获取传递的搜索关键词
      this.productName = options.searchText || '';
      this.fetchProducts(); // 调用接口加载数据
    },

    methods: {
      // 调用接口获取商品数据
      async fetchProducts() {
        if (!this.productName.trim()) return;
        try {
			console.log(this.productName)
          // 调用后端接口
         const response = await searchProduct({ productName: this.productName});
		 console.log(response)
          if (response) {
            this.productList = response; // 赋值商品列表
          } else {
            uni.showToast({ title: '未找到相关商品', icon: 'none' });
          }
        } catch (error) {
          console.error('搜索商品失败:', error);
          uni.showToast({ title: '搜索商品失败，请稍后重试', icon: 'none' });
        }
      },

      // 获取商品的主图
   
   getPrimaryImageUrl(images) {
      if (!images || images.length === 0) {
        // 返回默认动态图片路径
        return '/static/home/dj.jpg'; // 默认图片的 URL
      }
     
      const primaryImage = images.find(image => image.isPrimary);
      // 返回主图 URL 或第一张图片的 URL，如果都没有，则返回默认图片
      return primaryImage?.imageUrl || images[0]?.imageUrl || '/static/home/dj.jpg';
    },
    },
  };
</script>

<style lang="scss">
.scroll-container {
  

  .product-row {
    display: flex;
    flex-wrap: wrap;

    .product-item {
      width: 48%;
      margin-bottom: 10px;
	  margin-left: 5px;
    }
  }
}
</style>
